<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>流量统计-订单分析</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${request.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<link rel="stylesheet" href="${request.contextPath}/stylesheets/daterangepicker.css">
		<!-- ace settings handler -->
		<script src="${request.contextPath}/assets/js/ace-extra.min.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
		<link rel="stylesheet" href="${request.contextPath}/stylesheets/loading.css" />
		<script type="text/javascript" src="${request.contextPath}/javascripts/loading.js"></script>
		<link rel="stylesheet" href="${request.contextPath}/stylesheets/tips.css"/>
	<style>
	th,td{text-align: center;}
	</style>
	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<h5 class="widget-title lighter">筛选条件</h5>
						</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="#">
									<div class="row widget-main">
										<div class="form-group">
											<label  class="control-label no-padding-right">选择时段:</label>
											<input type="text" id="config-demo" name="chooseTimeVO" class="form-control time" value="">
											<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												昨日
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去7天
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去31天
											</button>
										</div>
										<div class="form-group">
											<label  class="control-label no-padding-right">用户类别</label>
											<div class="btn-group">
												<label class="btn btn-sm btn-link"> <input type="radio" name="user_type" checked value="">全部</label>
												<!-- <label class="btn btn-sm btn-link"> <input type="radio" name="user_type" value="0">新用户</label> -->
												<label class="btn btn-sm btn-link"> <input type="radio" name="user_type" value="1">1年以内</label>
												<label class="btn btn-sm btn-link"> <input type="radio" name="user_type" value="2">1-2年</label>
												<label class="btn btn-sm btn-link"> <input type="radio" name="user_type" value="3">2-3年</label>
												<label class="btn btn-sm btn-link"> <input type="radio" name="user_type" value=">3">3年以上</label>
											</div>
										</div>
										<div class="form-group">
											<button id="search" type="button"  class="btn btn-pink btn-sm">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												Search
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				
				<div class="col-xs-12">
					<div class="tabbable">
						<ul class="nav nav-tabs tab-color-blue background-blue" id="myTab" style="padding-left: 5px;">
							<li class="active" style="width:120px;font-size:16px;text-align:center;">
							<a data-toggle="tab" href="#orderAmount" aria-expanded="false"
							  onclick="showDetail('order_num')">下单量</a></li>
							<li class="" style="width:120px;font-size:16px;text-align:center;">
							<a data-toggle="tab" href="#orderMoney" aria-expanded="true"
							  onclick="showDetail('order_money')">订单金额</a></li>
						</ul>
						<input type="hidden" id="show_data" value="order_num"/>
						
						<div class="row" style="padding-top: 5px;">
								<!-- 柱状图 -->
							<div class="col-xs-6">
								<div class="widget-box">
									<div class="widget-header widget-header-flat">
										<h4 class="widget-title lighter">
											<i class="ace-icon fa fa-star orange"></i><span class="title_bar"></span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>某一时间段内各品类<span class="content_name"></span>总合<s></s></span>
											</label>
											<small class="pink">单击节点, 发现更多</small>
										</h4>
									</div>
									<div class="widget-body">
										<div id="orderBarChart" style="height: 400px;"></div>
									</div>
								</div>
							</div>
								<!-- 折线图 -->
							<div class="col-xs-6"  style="padding-left: 0px!important;">
								<div class="widget-box" >
									<div class="widget-header widget-header-flat">
										<h4 class="widget-title lighter">
											<i class="ace-icon fa fa-signal blue"></i><span class="title_line"></span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>某一时间段内各品类逐日<span class="content_name"></span><s></s></span>
											</label>
										</h4>
									</div>
									<div class="widget-body">
										<div id="orderLineChart" style="height: 400px;"></div>
									</div>
								</div>
							</div>
						 </div>
						<div class="row" style="padding-top: 5px;" id="theme_title">
							<div class="col-xs-12">
								<div class="widget-box">
									<div class="widget-header widget-header-small">
										<h4 class="widget-title">品类：<span class="category_name"></span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>点击柱状图获取一段时间内某一品类各平台(包括：ANDROID,IOS,WAP)<span class="content_name"></span><s></s></span>
											</label>
										</h4>
									</div>
								</div>
							</div>
						</div>
						
						<!-- android -->
						<div class="row">
							<div class="col-sm-6" id="android">
								<div class="widget-box transparent">
									<div class="widget-body">
										<div class="widget-main no-padding">
											<div class="widget-header widget-header-flat">
												<h4 class="widget-title lighter">
													<i class="ace-icon fa fa-star orange"></i>ANDROID<!-- &nbsp;&nbsp;&nbsp;(<b class="numByPlatform"></b> ) --> 
													<label style="margin-left: 20px;" class="dateSection"></label>
												</h4>
												<label class="help_img">
													<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
													<span class='tips'>某一品类一段时间内ANDROID各下载渠道<span class="content_name"></span><s></s></span>
												</label>
											</div>
											<div class="widget-body">
												<div id="androidBarChart" style="height: 300px;"></div>
											</div>
										</div>
								   </div>
								</div>
						  </div>
						 <!-- ios -->
						  <div class="col-sm-6" id="ios"  style="padding-left: 0px!important;">
							<div class="widget-box transparent">
								<div class="widget-body">
									<div class="widget-main no-padding">
										<div class="widget-header widget-header-flat">
											<h4 class="widget-title lighter">
												<i class="ace-icon fa fa-star orange"></i>IOS<!-- &nbsp;&nbsp;&nbsp;(<b class="numByPlatform"></b> )  -->
												<label style="margin-left: 20px;" class="dateSection"></label>
											</h4>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>某一品类一段时间内IOS各推广渠道<span class="content_name"></span><s></s></span>
											</label>
										</div>
										<div class="widget-body">
											<div id="iosBarChart" style="height: 300px;"></div>
										</div>
									</div>
							   </div>
							</div>
					   </div>
					  </div>
					<!-- wap/pc -->
						<div id="wap">
							<div class="tab-pane active in">
								<div class="row">
									<div class="col-xs-12">
										<div class="row">
											<div class="col-sm-6">
												<div class="widget-box transparent">
													<div class="widget-header widget-header-flat">
														<h4 class="widget-title lighter">
															<i class="ace-icon fa fa-star orange"></i>WAP<!-- &nbsp;&nbsp;&nbsp;(<b class="numByPlatform"></b>)   -->
															<label style="margin-left: 20px;" class="dateSection"></label>
														</h4>
														<label class="help_img">
															<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
															<span class='tips'>某一品类一段时间内WAP各渠道<span class="content_name"></span>（点击tab的行获取近一步数据）<s></s></span>
														</label>
													</div>
													<div class="dataTables_wrapper form-inline no-footer">
														<table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="dynamic-table_info">
															<thead>
															<tr>
																<th>序号</th>
																<th>时间</th>
																<th>渠道</th>
																<th class="th_name"></th>
																<th>操作</th>
															</tr>
															</thead>
															<tbody id="channelData"></tbody>
														</table>
													</div>
													</div>
											</div>
											
											<div class="col-xs-6" id="channelDetailChart" style="padding-left: 0px!important;">
												<div class="widget-box transparent">
													<div class="widget-body">
														<div class="widget-main no-padding">
															<div class="widget-header widget-header-flat">
																<h4 class="widget-title lighter">
																	<i class="ace-icon fa fa-star orange"></i><span class="channelName"></span><!-- &nbsp;&nbsp;&nbsp;(<b class="numByChannel"></b> ) --> 
																	<label style="margin-left: 20px;" class="dateSection"></label>
																</h4>
																<label class="help_img">
																	<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
																	<span class='tips'>某一品类一段时间内WAP某一一级渠道下各二级渠道<span class="content_name"></span><s></s></span>
																</label>
															</div>
															<div class="widget-body">
																<div id="channelBarChart" style="height: 300px;"></div>
															</div>
														</div>
												   </div>
												</div>
										  </div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<script src="${request.contextPath}/assets/js/moment.min.js"></script>
		<script src="${request.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/bootstrap.min.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/moment.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/daterangepicker.js"></script>
		<script src="${request.contextPath}/assets/js/chosen.jquery.js"></script>
		<script src="${request.contextPath}/assets/js/user/base.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/dateRange.js"></script>
		<script src="${request.contextPath}/assets/js/d3.v3.min.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/g2.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/slider.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/g2-modal.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/FileSaver.js"></script>
		<script type="text/javascript" src="${request.contextPath}/javascripts/export-csv.js"></script>
		<script type="text/javascript">
		d3.select(self.frameElement).style("height", "1500px");
		jQuery(function($) {
			$("#search").click();
		});
		
		function showDetail(flag){
			$("#show_data").val(flag);
			$("#search").click();
		}
		
		$("#search").on("click",function(){
			var flag = $("#show_data").val();
		    getChartData(flag);
		});
		function getChartData(flag){
			var chooseTime = $("#config-demo").val();
			var userUseYear = $("input[name='user_type']:checked").val();
			$.ajax({
				url : '${request.contextPath}/order/orderChartData',
				type : "POST",
				data : {
					chooseTime:chooseTime,
					userUseYear:userUseYear,
					flag:flag
				},
				beforeSend: function(){
	 			   $("#search").attr("disabled",true);
	 			    openPartialLayer($("#orderLineChart"));
	 			    openPartialLayer($("#orderBarChart"));
		    	 },
			    complete: function(){
			    	$("#search").attr("disabled",false);
			    	removeLoading($("#orderLineChart"));
			    	removeLoading($("#orderBarChart"));
			    },
				success:function(data) {
					var chart;

					if(flag == "order_num"){
						$(".title_line").html("下单量品类趋式图");
						$(".title_bar").html("下单量品类统计图");
						$(".content_name").html("下单量");
						$(".th_name").html("下单量(个)");
						var defs = {
							'categoryName': {
								alias : '品类'
							},
							'amount': {
								alias :'订单量'
							},
							'time':{
								type: 'time',
								tickCount: 8
							}
						};
						chart = histogramModal(data.data.orderAmountJson2,'orderBarChart','categoryName','amount','','订单量',400,defs);
						lineChartModal(data.data.orderAmountJson,'orderLineChart','time','amount','categoryName','','订单量',400,defs);
					}else{
						$(".title_line").html("订单金额品类趋式图");
						$(".title_bar").html("订单金额品类统计图");
						$(".content_name").html("订单金额");
						$(".th_name").html("订单金额(元)");
						var defs = {
							'categoryName': {
								alias : '品类'
							},
							'amount': {
								alias :'订单金额'
							},
							'time':{
								type: 'time',
								tickCount: 8
							}
						};
						chart = histogramModal(data.data.orderMoneyJson2,'orderBarChart','categoryName','amount','','订单金额',400,defs);
						lineChartModal(data.data.orderMoneyJson,'orderLineChart','time','amount','categoryName','','订单金额',400,defs);
					}
					//柱状图点击事件
					if(data.data.orderAmountJson2 == "" || data.data.orderMoneyJson2 == ""){
						$("#theme_title").hide();
						$("#wap").hide();
						$("#android").hide();
						$("#ios").hide();
					}else{
						$("#theme_title").show();
						$("#wap").show();
						$("#android").show();
						$("#ios").show();
						getDataByPlatform(chart.getAllGeoms()[0].getData()[0]._origin.categoryName,chart.getAllGeoms()[0].getData()[0]._origin.amount);
						chart.on('plotclick', function (ev) {
							var data = ev.data;
							if (data) {
								var name = data._origin['categoryName'];
								var amount = data._origin['amount'];
								getDataByPlatform(name,amount);
							}
						});
						$("#orderBarChart").css("cursor","pointer");
					}
				},
				error:function(data) {
					//showMsg("查询数据有误");
				}
			});
		}
		
		function getDataByPlatform(name,value){
			$(".category_name").html(name);
			var flag = $("#show_data").val();
			var chooseTime = $("#config-demo").val();
			var userUseYear = $("input[name='user_type']:checked").val();
			$(".dateSection").html(chooseTime);
			$(".platformName").html(name);
			$(".numByPlatform").html(value);
			$.ajax({
				url : '${request.contextPath}/order/orderDataByCategory',
				type : "POST",
				data : {
					chooseTime:chooseTime,
					flag:flag,
					userUseYear:userUseYear,
					categoryName:name
				},
				success:function(data) {
					var html = "";
					for (i = 0; i < data.data.firstChannelArr.length; i++) {
						var index = i + 1;
						var amount = data.data.firstAmountArr[i];
						if(flag == "order_money"){
							amount = amount.toFixed(2);
						}
						html += "<tr>"
								+"<td>" + index + "</td>" 
								+"<td>" + chooseTime + "</td>"
								+"<td class='parentChannel'>" + data.data.firstChannelArr[i] + "</td>"
								+"<td>" + amount + "</td><td><i class='ace-icon fa fa-hand-o-right icon-animated-hand-pointer red'></i></td></tr>";
					}
					$("#channelData").html(html);
					$("#channelData").css("cursor","pointer");
					$("#channelData tr").on("click",function(){
						$("#channelData td i").removeClass("gray").addClass("red");
						$(this).children("td").eq(4).children("i").removeClass("red").addClass("gray");
						var channel = $(this).children(".parentChannel").html();
						$("#channelData tr").css("background-color","");
						$(this).css("background-color","#d9edf6");
						if(channel == "SEM"){
							getChannelData(data.data.SEMChennelMap,channel);
						}else if(channel == "SEO"){
							getChannelData(data.data.SEOChennelMap,channel);
						}else if(channel == "分享"){
							getChannelData(data.data.shareChennelMap,channel);
						}else{
							$("#channelDetailChart").hide();
						}
					});
					$("#channelData tr").eq(1).click();
					var	exportForm={
								'headers':['平台','下单量'],
								'cols':['name',	'value']
						};
					horizontalHistogramModal(data.data.androidJsonArr,'androidBarChart','name','value',300,'',exportForm);
					horizontalHistogramModal(data.data.iosJsonArr,'iosBarChart','name','value',300,'',exportForm);
				},
				error:function(data) {
					//showMsg("查询数据有误");
				}
			});
		}
		
		function getChannelData(channelJson,channelName){
			$("#channelDetailChart").show();
			$.ajax({
				url : '${request.contextPath}/visitors/visitorChannelData',
				type : "POST",
				data : {
					channelJson:channelJson
				},
				success:function(data) {
					$(".channelName").html(channelName);
					var	exportForm={
								'headers':['平台','下单金额'],
								'cols':['name',	'value']
						};
					horizontalHistogramModal(data.data.jsonArr,'channelBarChart','name','value',300,'',exportForm);
				},
				error:function(data) {
					//showMsg("查询数据有误");
				}
			});
		}
	</script>
	</body>
</html>